<template>
  <div
    class="item"
    :draggable="tree.draggable"
    @dragstart.stop="dragstart"
    @dragover.stop="dragover"
    @drop.stop="drop"
    ref="item"
    :id="data._treeId">
    <!-- 每一行: 拖拽时高亮行 -->
    <div class="line" :style="lineStyle('before')"></div>
    <div class="text"
      @click="itemClick"
      :style="{ height: height, lineHeight: height, fontSize: fontSize }">
      <!--  -->
      <span :style="{ display: 'inline-block', width: (data.layer - 1) * 18 + 'px' }"></span>
      <img
        :src="iconImg"
        :class="[
          'node-item__icon',
          data.children && data.children.length ? '' : 'is-leaf',
          data.defaultExpandAll ? 'iconBottom' : 'iconRight']"
        :style="{
          width: fontSize,
          height: fontSize,
        }"/>
      <!-- 如果节点上配置TreeImg属性，则在前面设置插入treeImg图片 -->
      <img
        v-if="data.TreeImg"
        :src="dataImg"
        class="node-item_img"
        :style="{ width: fontSize, height: fontSize }"/>
      <!-- 节点文本 -->
      <span class="node-item__label" :style="nodeItemLabelStyle">{{ data.label }}</span>
    </div>
    <!-- 往后插入时的高亮行 -->
    <div class="line" :style="lineStyle('after')"></div>
    <!-- 子组件 -->
    <div
      v-if="data.children && data.children.length != 0"
      :class="[data.defaultExpandAll ? 'sonShow' : 'sonVanish', 'son']">
      <my-node
        v-for="item in data.children"
        :key="item._treeId"
        :data="item"></my-node>
    </div>
  </div>
</template>

<script>
import { findNearestComponent, getOldObject } from "./utils";
export default {
  name: "MyNode",
  props: {
    data: {
      // 接收的数据
      type: Object,
    },
  },
  inject: ["draggableColor", "height", "fontSize", "icon"],
  data() {
    return {
      tree: "", // 最上一级
      dropType: "none",
      iconImg: "",
      dataImg: "",
    };
  },
  computed: {
    nodeItemLabelStyle () {
      return {
        background: this.dropType === 'inner' ? `#${this.draggableColor}` : '',
        height: this.fontSize
      }
    }
  },
  created() {
    let parent = this.$parent;
    if (parent.isTree) {
      this.tree = parent;
    } else {
      this.tree = parent.tree;
    }
    // 有没有自定义icon
    if (this.icon.length != 0) {
      let s = this.icon.slice(0, 2);
      let url = this.icon.slice(2);
      if (s == "@/") {
        this.iconImg = require(`@/${url}`);
      } else {
        this.iconImg = this.icon;
      }
    } else {
      this.iconImg = require("./right.png");
    }
    if (this.data.TreeImg) {
      let s = this.data.TreeImg.slice(0, 2);
      let url = this.data.TreeImg.slice(2);
      if (s == "@/") {
        this.dataImg = require(`@/${url}`);
      } else {
        this.dataImg = this.data.TreeImg;
      }
    }
  },
  methods: {
    // 线条样式
    lineStyle (type) {
      return {
        background: this.dropType == type ? `#${this.draggableColor}` : ''
      }
    },
    // 选择要滑动的元素
    dragstart(ev) {
      console.log(this);
      if (!this.tree.draggable) return;
      this.tree.$emit("node-start", this.data, this, ev);
    },
    // 滑动中
    dragover(ev) {
      if (!this.tree.draggable) return;
      ev.preventDefault();
      this.tree.$emit("node-over", this.data, this, ev);
    },
    // 滑动结束
    drop(ev) {
      // console.log(ev)
      if (!this.tree.draggable) return;
      this.tree.$emit("node-drop", this.data, this, ev);
    },
    // 行点击事件
    itemClick(ev) {
      let dropNode = findNearestComponent(ev.target, "MyNode"); // 现在的节点
      this.data.defaultExpandAll = !this.data.defaultExpandAll; // 改变树的伸缩状态
      this.tree.$emit("tree-click", this.data.data, this.data, dropNode);
      let right = localStorage.getItem("right");
      if (this.data.defaultExpandAll === true) {
        if (right) {
          right = JSON.parse(right);
          right.push(this.data.id);
        } else {
          right = [];
          right.push(this.data.id);
        }
      } else {
        if (right) {
          right = JSON.parse(right);
          right.indexOf(this.data.id) !== -1
            ? right.splice(right.indexOf(this.data.id), 1)
            : "";
        }
      }
      localStorage.setItem("right", JSON.stringify(right));
    },
  },
};
</script>

<style scoped lang="scss">
.line {
  height: 1px
}
.node-item__icon {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  &.is-leaf {
    filter: opacity(0);
  }
}
.node-item__label {
  overflow: hidden;
}
.node-item_img {
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
}
.text {
  font-size: 14px;
  height: 26px;
  line-height: 26px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
}
.text:hover {
  background: #f5f7fa;
}
.iconBottom {
  transition: 0.3s;
  transform: rotate(90deg);
}
.iconRight {
  transition: 0.3s;
  transform: rotate(0deg);
}
.son {
  max-height: 0px;
  overflow: hidden;
  transition: 0.3s max-height;
}
.sonVanish {
  max-height: 0px;
}
.sonShow {
  max-height: 1000px;
}
</style>